<template>
	<scroll-view
		class="page_box"
		@scrolltolower="lower"
		enable-flex="true"
		scroll-y="true"
		style="height: 93vh;"
	>
		<view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box">
			<view class="head bg-img flex flex-direction align-center justify-center">
				<view
					class="bg-white flex align-center justify-center round"
					style="width: 115rpx; height: 115rpx;"
				>
					<image
						:src="data.headimgurl"
						mode="aspectFill"
						style="width: 110rpx; height: 110rpx;"
						class="round "
					></image>
				</view>
				<!-- <view class="cu-avatar round bg-gray lg ">U</view> -->
				<text class="f34 text-bold margin-top-sm">
					{{ data.nickname ? data.nickname : '平台用户' }}
				</text>
				<view class="flex align-center margin-top-sm" v-if="data.level">
					<text class="cuIcon-favorfill margin-right-sm" style="color: #fbb03b;"></text>
					<text class="f26">当前等级</text>
					<text class="shu margin-lr-sm"></text>
					<text class="f26">{{ data.level }}</text>
				</view>
				<view class="xxx" @click="gggg">
					
				</view>
			</view>
			<view class="info margin-top flex justify-between w100 ">
				<view class="info-l bg-white padding flex flex-direction">
					<text class="f26 text-gray">我的推荐人</text>
					<view class="flex wh100 align-center">
						<image
							class="round "
							:src="refereesUser.headimgurl"
							mode="aspectFill"
							style="width: 87rpx;height: 87rpx;"
						></image>
						<view class="flex flex-direction margin-left h100 justify-center">
							<text class="f28">
								{{ refereesUser.nickname ? refereesUser.nickname : '无' }}
							</text>
							<view class="flex align-center margin-top-xs">
								<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
								<text class="f26">等级：{{ refereesUser.level }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="info-l bg-white padding flex flex-direction">
					<text class="f26 text-gray">我的上级</text>
					<view class="flex wh100 align-center">
						<image
							class="round "
							:src="superUser.headimgurl"
							mode="aspectFill"
							style="width: 87rpx;height: 87rpx;"
						></image>
						<view class="flex flex-direction margin-left h100 justify-center">
							<text class="f28">{{ superUser.nickname ? superUser.nickname : '无' }}</text>
							<view class="flex align-center margin-top-xs">
								<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
								<text class="f26">等级：{{ superUser.level }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <button class="" @click="gggg">000000000000000000</button> -->
			<view class="mySubordinate margin-top-xs bg-white padding">
				<view class="flex justify-between">
					<text class="f30 text-black">我的下级</text>
					<text class="f26 text-gray">共{{ myRecordTotal }}人</text>
				</view>
				<view @click="gotoMyRecordPage(item.id)" v-for="(item, index) in myRecord" :key="index">
					<view class="mySubordinate-info padding-tb flex justify-between">
						<view class="flex">
							<image
								:src="item.headimgurl"
								mode="aspectFill"
								class=" round"
								style="width: 80rpx; height: 80rpx;"
							></image>
							<view class="flex flex-direction margin-left justify-around">
								<text class="f30 text-blue text-black">
									{{ item.nickname ? item.nickname : '匿名用户' }}
								</text>
								<text class="f24 text-gray">加入时间：{{ item.createDt }}</text>
							</view>
						</view>
						<view class="tag  flex justify-end">
							<view class="tag-inside">
								<view class="tag-inside flex justify-around align-center">
									<text class="cuIcon-favorfill " style="color: #fbb03b;"></text>
									<text class="f26 text-white">{{ item.level }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<u-popup v-model="showw" mode="center" border-radius="10">
			<view class="box-header">
				<view class="text">
					请选择等级
				</view>
				<view class="radion">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</u-popup>
		
		
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</scroll-view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			data: {},
			/**
			 * 邀请人
			 * id
			 * 等级
			 * 昵称
			 * 电话
			 * 头像
			 *  id:'',
				level:'',
				nickname:'',
				tel:'',
				headimgurl:''
			 */
			refereesUser: {},
			/**
			 * 上级
			 * id
			 * 等级
			 * 昵称
			 * 电话
			 * 头像
			 *  id:'',
				level:'',
				nickname:'',
				tel:'',
				headimgurl:''
			 */
			superUser: {},
			/**
			 *我的下级
			 */
			myRecord: [],
			myRecordTotal: '',
			page: 1,
			showw: false,
			list: [{
					name: 'A',
					disabled: false
				},
				{
					name: 'B',
					disabled: false
				},
				{
					name: 'C',
					disabled: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: 'A',
		};
	},
	onShow() {
		this.gettingInfo();
		this.getshareInfo(0);
	},
	onLoad(e) {},
	methods: {
		gggg(){
			// console.log("11111111: ",11111111);
			this.showw = true
			console.log("this.showw: ",this.showw);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			uni.navigateTo({
				url: '/pages/personalCtr/inviteFriends?info=' + e
			})
			this.show1 = false
		},
		
		// clickShow() {
		// 	this.show1 = true
		// },
		
		
		// 获取用户基本信息
		async gettingInfo() {
			const res = await this.$u.get('user/' + uni.getStorageSync('data').id, {}, {});
			if (res.code == 1) {
				return false;
			}
			this.data = res.data;
			// console.log('888888888888',res.data.headimgurl)
		},
		//获取邀请人和上级
		async getshareInfo(style) {
			if (style == 0) {
				this.page = 1;
			} else {
				this.page += 1;
			}

			let res = await this.$u.get(
				'inviterrecord/page?superId=' + uni.getStorageSync('data').id + '&current=' + this.page
			);
			if (res.code == 1) {
				return false;
			} 
			// if (res.data.team.total != 0 && res.data.refereesUser != null && res.data.superUser != null) {
				this.myRecordTotal = res.data.team.total;
				this.refereesUser = res.data.refereesUser;
				this.superUser = res.data.superUser;
			// }
			
			// this.myRecordTotal = res.data.team.total;
			// this.refereesUser = res.data.refereesUser;
			// this.superUser = res.data.superUser;
			
			if (style == 0) {
				this.myRecord = res.data.team.records;
			} else {
				this.myRecord = this.myRecord.concat(res.data.team.records);
			}
		},
		gotoMyRecordPage(id) {
			console.log(id);
			uni.navigateTo({
				url: '/pages/myTeam/myRecordPage?userid=' + id
			});
		},
		async jump(url) {
			uni.navigateTo({
				url
			});
		},
		//下拉刷新触发
		lower() {
			this.getshareInfo(1);
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	background-color: #f7f7f7;
	/deep/.u-drawer__scroll-view {
		z-index: 9999 !important;
	}
	.content_box {
		.head {
			position: relative;
			width: 100vw;
			height: 540rpx;
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/456456.png);
			.shu {
				display: block;
				width: 1rpx;
				height: 24rpx;
				background: #5b8180;
			}
			.xxx {
				width: 700rpx;
				height: 100rpx;
				background-color: transparent;
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				border-radius: 10rpx;
				transform: translateX(-50%);
			}
		}
		.info {
			height: 241rpx;
			.info-l {
				width: 370rpx;
				height: 241rpx;
			}
		}
		.mySubordinate {
			.tag {
				.tag-inside {
					width: 80rpx;
					height: 30rpx;
					background: linear-gradient(139deg, #393b56, #4f4f62);
					border-radius: 10rpx;
				}
			}
		}
	}
	
	.box-header {
		width: 300rpx;

		.text {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
		
		.radion {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	} 
}
</style>
